<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			div {
				width: 800px;
				height: 800px;
				margin: 100px auto;
				border-radius: 50%;
				/*box-shadow:inset 20px 0px 10px blue,inset -20px -0px 10px yellow,inset 0 20px 10px red,inset 0 -20px 10px green;*/
				color: white;
				font-size: 50px;
				text-align: center;
				line-height: 200px;
				animation: text 3s linear infinite alternate;
				transition: 2s;
				/*text-shadow: 0px 0px 5px white,0px 0px 5px white,0px 0px 5px white,0px 0px 40px blue;*/
			}
			@keyframes text {
				0% {
					text-shadow：0 0 0 white;
				}
				100% {
					text-shadow: 0px 0px 5px white,0px 0px 5px white,0px 0px 5px white,0px 0px 20px black,0px 0px 20px black;
				}
			}
			div:hover {
				box-shadow:inset 20px 0px 10px blue,inset -20px -0px 10px yellow,inset 0 20px 10px red,inset 0 -20px 10px green;
			}
		</style>
	</head>
	<body>
		<div>阴影</div>
	</body>
</html>